import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import WholesaleScreen from './src/modules/WholesaleScreen';
import PointsExchangeScreen from './src/modules/PointsExchangeScreen';
import PersonalCenterScreen from './src/modules/PersonalCenterScreen';
import ProductDetailPage from './src/modules/ProductDetailPage';
import ProductListPage from './src/modules/ProductListPage';
import WholesaleOrderPage from './src/modules/WholesaleOrderPage';
import UserAgreementPage from './src/modules/UserAgreementPage';
import RegistrationPage from './src/modules/RegistrationPage';
import EarningsRecordPage from './src/modules/EarningsRecordPage';
import ServiceChargePage from './src/modules/ServiceChargePage';
import PointsRecordPage from './src/modules/PointsRecordPage';
import ServiceFeeTransferPage from './src/modules/ServiceFeeTransferPage';
import RealNameAuthenticationPage from './src/modules/RealNameAuthenticationPage';
import PointExchangeRecordPage from './src/modules/PointExchangeRecordPage';
import AddressPage from './src/modules/AddressPage';
import {createStackNavigator} from '@react-navigation/stack';
import CustomBackButton from './src/customview/NaviBackButton';
import {Image} from 'react-native';
import theme from './src/utils/theme';
import PasswordChangePage from './src/modules/PasswordChangePage';

const Tab = createBottomTabNavigator();
const WholesaleStack = createStackNavigator();
const PointsExchangeStack = createStackNavigator();
const PersonalCenterStack = createStackNavigator();
const navigationOptions = {
  headerStyle: {
    backgroundColor: theme.colors.primary, // 设置导航栏背景颜色
  },
  headerTintColor: '#fff', // 设置标题和按钮的颜色
  headerTitleStyle: {
    fontWeight: 'bold',
  },
};

function WholesaleStackScreen() {
  return (
    <WholesaleStack.Navigator screenOptions={navigationOptions}>
      <WholesaleStack.Screen name="批发场次" component={WholesaleScreen} options={{
          headerTitleStyle: {
            color: '#fff', // 设置标题字体颜色
          },
        }}></WholesaleStack.Screen>
      <WholesaleStack.Screen
        name="ProductListPage"
        component={ProductListPage}
        options={({navigation}) => ({
          title: '场次商品',
          headerLeft: () => (
            <CustomBackButton onPress={() => navigation.goBack()} />
          ),
        })}
      />
    </WholesaleStack.Navigator>
  );
}

function PointsExchangeStackScreen() {
  return (
    <PointsExchangeStack.Navigator screenOptions={navigationOptions}>
      <PointsExchangeStack.Screen
        name="积分兑换"
        component={PointsExchangeScreen}
      />
      <PointsExchangeStack.Screen
        name="ProductDetailPage"
        component={ProductDetailPage}
        options={({navigation}) => ({
          title: '商品详情',
          headerLeft: () => (
            <CustomBackButton onPress={() => navigation.goBack()} />
          ),
        })}
      />
    </PointsExchangeStack.Navigator>
  );
}

function PersonalCenterStackScreen() {
  return (
    <PersonalCenterStack.Navigator screenOptions={navigationOptions}>
      <PersonalCenterStack.Screen name="个人中心" component={PersonalCenterScreen} />
      <PersonalCenterStack.Screen
        name="WholesaleOrderPage"
        component={WholesaleOrderPage}
        options={({navigation}) => ({
          title: '批发订单',
          headerLeft: () => (
            <CustomBackButton onPress={() => navigation.goBack()} />
          ),
        })}
      />
      <PersonalCenterStack.Screen
        name="UserAgreementPage"
        component={UserAgreementPage}
        options={({navigation}) => ({
          title: '用户协议与隐私协议',
          headerLeft: () => (
            <CustomBackButton onPress={() => navigation.goBack()} />
          ),
        })}
      />
      <PersonalCenterStack.Screen
        name="RegistrationPage"
        component={RegistrationPage}
        options={({navigation}) => ({
          title: '新用户注册',
          headerLeft: () => (
            <CustomBackButton onPress={() => navigation.goBack()} />
          ),
        })}
      />
      <PersonalCenterStack.Screen
        name="EarningsRecordPage"
        component={EarningsRecordPage}
        options={({navigation}) => ({
          title: '余额明细',
          headerLeft: () => (
            <CustomBackButton onPress={() => navigation.goBack()} />
          ),
        })}
      />
      <PersonalCenterStack.Screen
        name="ServiceChargePage"
        component={ServiceChargePage}
        options={({navigation}) => ({
          title: '服务费明细',
          headerLeft: () => (
            <CustomBackButton onPress={() => navigation.goBack()} />
          ),
        })}
      />
      <PersonalCenterStack.Screen
        name="PointsRecordPage"
        component={PointsRecordPage}
        options={({navigation}) => ({
          title: '积分明细',
          headerLeft: () => (
            <CustomBackButton onPress={() => navigation.goBack()} />
          ),
        })}
      />
      <PersonalCenterStack.Screen
        name="RealNameAuthenticationPage"
        component={RealNameAuthenticationPage}
        options={({navigation}) => ({
          title: '实名认证',
          headerLeft: () => (
            <CustomBackButton onPress={() => navigation.goBack()} />
          ),
        })}
      />
      <PersonalCenterStack.Screen
        name="PointExchangeRecordPage"
        component={PointExchangeRecordPage}
        options={({navigation}) => ({
          title: '兑换记录',
          headerLeft: () => (
            <CustomBackButton onPress={() => navigation.goBack()} />
          ),
        })}
      />
      <PersonalCenterStack.Screen
        name="AddressPage"
        component={AddressPage}
        options={({navigation}) => ({
          title: '收货地址',
          headerLeft: () => (
            <CustomBackButton onPress={() => navigation.goBack()} />
          ),
        })}
      />
      <PersonalCenterStack.Screen
        name="PasswordChangePage"
        component={PasswordChangePage}
        options={({navigation}) => ({
          title: '密码修改',
          headerLeft: () => (
            <CustomBackButton onPress={() => navigation.goBack()} />
          ),
        })}
      />
      <PersonalCenterStack.Screen
        name="ServiceFeeTransferPage"
        component={ServiceFeeTransferPage}
        options={({navigation}) => ({
          title: '服务费转账',
          headerLeft: () => (
            <CustomBackButton onPress={() => navigation.goBack()} />
          ),
        })}
      />
    </PersonalCenterStack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({route}) => ({
          tabBarIcon: ({focused, size}) => {
            let iconSource;
            if (route.name === '批发区') {
              iconSource = focused
                ? require('./res/image/wholesale_active.png')
                : require('./res/image/wholesale_inactive.png');
            } else if (route.name === '积分区') {
              iconSource = focused
                ? require('./res/image/exchange_active.png')
                : require('./res/image/exchange_inactive.png');
            } else if (route.name === '个人') {
              iconSource = focused
                ? require('./res/image/person_active.png')
                : require('./res/image/person_inactive.png');
            }
            return (
              <Image source={iconSource} style={{width: size, height: size}} />
            );
          },
          tabBarActiveTintColor: theme.colors.primary,
          tabBarInactiveTintColor: '#999999',
          headerShown: false,
        })}>
        <Tab.Screen name="批发区" component={WholesaleStackScreen} />
        <Tab.Screen name="积分区" component={PointsExchangeStackScreen} />
        <Tab.Screen name="个人" component={PersonalCenterStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;
